<template>
    <!-- 服务委托页面 -->
    <el-card>
        <el-form :model="searchForm" class="mb-3" size="small">
            <el-row :gutter="24">
                <el-col :span="6" :offset="0">
                    <el-form-item label="公司名称">
                        <el-input v-model="searchForm.companyName" placeholder="公司名称" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="服务类型">
                        <el-select v-model="searchForm.serviceType">
                            <el-option label="全部" value=""></el-option>
                            <el-option :label="item.label" :value="item.value" v-for="(item, index) in serviceTypeArr"
                                :key="index"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <div class="flex items-center justify-end">
                        <el-button type="primary" @click="getData(1)">搜索</el-button>
                        <el-button @click="resetSearchForm">重置</el-button>
                    </div>
                </el-col>
            </el-row>
        </el-form>

        <el-table :data="fwwtList" stripe style="width: 100%; justify-content: center;">
            <el-table-column prop="companyName" label="公司名称" />
            <el-table-column prop="serviceType" label="服务类型" />
            <el-table-column prop="shipName" label="船舶名称" />
            <el-table-column prop="serviceAddress" label="服务地址" />
            <el-table-column prop="sceneUser" label="现场联系人" />
            <el-table-column prop="sceneContact" label="现场联系方式" />
            <el-table-column prop="isSolved" label="是否处理" >
                <template #default="scope">
                    {{ scope.row.isSolved == 1 ? '已处理' : '待处理' }}
                    </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" />
            <el-table-column label="操作" width="150" align="center">
                <template #default="scope">
                    <el-button @click="handleDetail(scope.row)" type="primary" size="small" text>详情</el-button>
                    <el-popconfirm title="标记服务已解决?" @confirm="setFwwtSolved(scope.row)" v-if="scope.row.isSolved != 1">
                        <template #reference>
                            <el-button type="primary" size="small" text>已处理</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>

        <div class="flex items-center justify-center mt-5">
            <el-pagination background layout="prev, pager ,next" :total="searchForm.total"
                :current-page="searchForm.page" :page-size="searchForm.size" @current-change="getData" />
        </div>

        <FormDrawer size="65%" ref="form_fwwt_drawer_detail_ref" :showSubBtn="false" title="详情" @isClosed="isClosed">
            <el-form ref="form_fwwt_detail_ref" class="form-style" v-model="form_fwwt_detail" label-position="right"
                label-width="180px">
                <el-form-item label="公司名称" required>
                    <el-input v-model="form_fwwt_detail.companyName" disabled />
                </el-form-item>
                <el-form-item label="联系人" required>
                    <el-input v-model="form_fwwt_detail.linkmanName" disabled />
                </el-form-item>
                <el-form-item label="联系方式" required>
                    <el-input v-model="form_fwwt_detail.linkmanContact" disabled />
                </el-form-item>
                <el-form-item label="服务类型" required>
                    <el-select v-model="form_fwwt_detail.serviceType" disabled>
                        <el-option :label="item.label" :value="item.value" v-for="(item, index) in serviceTypeArr"
                            :key="index"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="服务地址" required>
                    <el-input type="textarea" v-model="form_fwwt_detail.serviceAddress" disabled />
                </el-form-item>
                <el-form-item label="服务时间范围" required>
                    <el-date-picker v-model="form_fwwt_detail.serviceStartTime" type="date" disabled />
                    <span class="text-gray-500">-</span>
                    <el-date-picker v-model="form_fwwt_detail.serviceEndTime" type="date" disabled />
                </el-form-item>
                <el-form-item label="船舶名称">
                    <el-input v-model="form_fwwt_detail.shipName" disabled />
                </el-form-item>
                <el-form-item label="现场联系人">
                    <el-input v-model="form_fwwt_detail.sceneUser" disabled />
                </el-form-item>
                <el-form-item label="现场联系方式">
                    <el-input v-model="form_fwwt_detail.sceneContact" disabled />
                </el-form-item>
                <el-form-item label="服务要求">
                    <el-input v-model="form_fwwt_detail.serviceRequest" type="textarea" disabled />
                </el-form-item>
                <el-form-item label="设备信息">
                    <el-input v-model="form_fwwt_detail.deviceInfo" disabled />
                </el-form-item>
            </el-form>
        </FormDrawer>
    </el-card>
</template>

<script setup>
import FormDrawer from "~/components/FormDrawer.vue";
import { fwwt_my_api, fwwt_setSolved_api } from '~/api/official_article_api';
import { ref, reactive, onMounted } from 'vue';

// ------------------ data -------------------------

const searchForm = reactive({
    companyName: '',
    serviceType: '',
    page: 1,
    size: 10,
    total: 1
})

const serviceTypeArr = [
    {
        label: '新船调试',
        value: 1
    },
    {
        label: '在航船改造',
        value: 2
    },
    {
        label: '设备加装',
        value: 3
    },
    {
        label: '设备修理',
        value: 4
    },
    {
        label: '年度检验',
        value: 5
    },
    {
        label: '跟船护航',
        value: 6
    },
    {
        label: '远程实时技术支持',
        value: 7
    },
    {
        label: '二次维修',
        value: 8
    },
    {
        label: '其它',
        value: 9
    }
];

const fwwtList = ref([])
const form_fwwt_drawer_detail_ref = ref(null)
const form_fwwt_detail_ref = ref(null)
const form_fwwt_detail = ref(null)

// -------------- function ---------------------

const getData = (e) => {
    searchForm.page = e;
    fwwt_my_api(searchForm).then(res => {
        
        res.records.forEach(item => {
            item.commissionId = item.commissionId.toString()
        })
        console.log('my fwwt list:', res)
        fwwtList.value = res.records
        searchForm.total = res.total
    })
}

const handleDetail = (detail) => {
    form_fwwt_detail.value = detail
    form_fwwt_detail.value.serviceType = detail.serviceType + '';
    form_fwwt_drawer_detail_ref.value.open()
}

const resetSearchForm = () => {
    searchForm.companyName = ""
    searchForm.serviceType = ""
    getData()
}

const setFwwtSolved = (row) => {
    fwwt_setSolved_api([row.commissionIdStr]).then(res => {
        console.log('服务已解决res: ', res)
        getData();
    })
    
}

// ----------- 生命周期 ----------------
onMounted(() => {
    getData();
})

</script>

<style></style>